/**---------------------------------function ----------------------------------*/
/**----------获取本月天数 ----------*/
function getCountDays() {
    let curDate = new Date();
    let curMonth = curDate.getMonth();
    curDate.setMonth(curMonth + 1);
    curDate.setDate(0);
    return curDate.getDate();
}
function getEveryDay() {
    let dayArry = [];
    let day = getCountDays();
    for (let k = 1; k <= day; k++) {
        dayArry.push(k);
    }
    
    return dayArry;
}
/**---------------------------------chart -------------------------------------*/
/**----------月统计 ----------*/
function chart1(data,xAxis){
    let chart = echarts.init(document.getElementById('chart1'));
    let option = {
        title:{
            text:'月统计',
            textStyle:{
                color:'#FFFFFF'
            },
            left:100
        },
        tooltip:{
            tigger:'item',
            formatter:"{b}日: {c}条"
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: xAxis,
            axisLine:{
                lineStyle:{
                    color:'#FFFFFF'
                }
            }
        },
        yAxis: {
            type: 'value',
            axisLine:{
                lineStyle:{
                    color:'#FFFFFF'
                }
            }
        },
        grid:{
            top:30,
            left:40
        },
        series: [{
            data: data,
            type: 'line',
            areaStyle: {}
        }],
        color:['#0BC3A9']
    };
    chart.setOption(option);
}
/**----------年统计 ----------*/
function chart2(data){
    let chart = echarts.init(document.getElementById('chart2'));
    let option = {
        title:{
            text:'年统计',
            textStyle:{
                color:'#FFFFFF'
            },
            left:100
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['一月','二月','三月',
            '四月','五月','六月','七月',
            '八月','九月','十月','十一月','十二月'],
            axisLine:{
                lineStyle:{
                    color:'#FFFFFF'
                }
            }
        },
        yAxis: {
            type: 'value',
            axisLine:{
                lineStyle:{
                    color:'#FFFFFF'
                }
            }
        },
        tooltip:{
          tigger:'item',
          formatter:"{b}: {c}条"
        },
        grid:{
            top:30,
            
            left:40
        },
        series: [{
            data: data,
            type: 'bar',
            areaStyle: {}
        }],
        color:['#0BC3A9']
    };
    chart.setOption(option);
}
/**----------分类统计 --------*/
function chart3(data,legend){
    let chart = echarts.init(document.getElementById("chart3"));
    let option = {
        title: {
            text: '分类统计',
            textStyle:{
              color:"#FFFFFF"
            },
            left:95,
          },
          tooltip:{
            tigger:'item',
            formatter:"{a}<br/>{b}: {c}条({d}%)"
          },
          legend:{
            orient:'vertical',
            data:legend,
            left:0,
            top:0,
            textStyle:{
                color:'#FFFFFF'
            }
          },
          series: [{
            name:"分类",
            type: 'pie',
            radius:'65%',
            data:data,
            label:{
                show:false,
                position:'inside',
                formatter:"{a}:{c}",
                color:'#FFFFFF'
            },
            itemStyle:{
                opacity:1
            },
            center:['63%','55%']
            // data: [5, 20, 36, 10, 10, 20,19,27]
          }],
          color:['#027B82','#0BC3A9','#9FE6B8','#FFDB5C','#B03A5B']
    };
    chart.setOption(option);
}
/**----------时间统计 --------*/
function chart4(data){
    let chart = echarts.init(document.getElementById("chart4"));
    let option = {
        title:{
            text:'时间统计',
            textStyle:{
                color:'#FFFFFF'
            },
            left:95
        },
        tooltip:{
          tigger:'item',
          formatter:"{b}: {c}条"
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ["00:00","01:00","02:00","03:00","04:00","05:00","06:00","07:00",
            "08:00","09:00","10:00","11:00","12:00","13:00","14:00","15:00","16:00",
            "17:00","18:00","19:00",
            "20:00","21:00","22:00","23:00"],
            axisLine:{
                lineStyle:{
                    color:'#FFFFFF'
                }
            }
        },
        yAxis: {
            type: 'value',
            axisLine:{
                lineStyle:{
                    color:'#FFFFFF'
                }
            }
        },
        grid:{
            top:35,
            left:45
        },
        series: [{
            data: data,
            type: 'line',
            areaStyle: {}
        }],
        color:['#0BC3A9']
    };
    chart.setOption(option);
}
/**------------------------------axios ---------------------------------------*/
/**----------axios 年统计、月统计 ----------*/
axios
.get('/d/bigscreen')
.then(function(response){
    chart1(response.data.shuju.m_data,getEveryDay());
    chart2(response.data.shuju.y_data);
})
.catch(function(error){
    console.log(error)
});
/**----------axios 分类统计 ---------------*/
axios
.get('/d/bigscreen/category')
.then(function(response){
    let data = response.data.data;
    let legend = response.data.legend;
    chart3(data,legend);
})
.catch(function(error){
    console.log(error)
});
/**----------axios 时间统计 ---------------*/
axios.get('/d/bigscreen/time')
.then(function(response){
    let data = response.data.time_list;
    chart4(data);
})
.catch(function(error){
    console.log(error)
});
